<template>
    <div class="m-selecttree" v-click-outside="()=>isShowSelect=false">
        <el-input
            v-bind="$attrs"
            :placeholder="placeholder"
            auto-complete="off"
            :value="valueTitle"
            @click.native="()=> isShowSelect=!isShowSelect"
            :readonly="true"
            :clearable="clearable"
            @clear="clearHandle"
        >
        </el-input>
        <i :class="[isShowSelect?'el-icon-arrow-up':'el-icon-arrow-down','icontip']"></i>
        <el-tree id="floatTree"
            ref="selectTree"
            :accordion="true"
            v-show="isShowSelect"
            empty-text="暂无数据"
            :highlight-current = true
            :default-expand-all = false
            :expand-on-click-node="true"
            :node-key="keyid"
            :data="data"
            :props="{value:keyid,label,children}"
            :default-expanded-keys="defaultExpandedKey"
            @node-click="selectClassfy"
            >
        </el-tree>

    </div>
</template>
<script>
export default {
    name:'el-select-tree',
    props:{
        keyid:{ type: String, default: 'id' },// ID字段名
        label:{ type: String, default: 'name' },// 显示名称
        children:{ type: String, default: 'children' }, // 子级字段名
        data:{ type: Array, default: [] }, // 选项列表数据(树形结构的对象数组)
        value:{ type: String, default: '' },// 初始值
        placeholder:{ type: String, default: '请选择' },
        clearable:{ type:Boolean, default: true },// 可清空选项
    },
    data() {
        return {
            isShowSelect:false,
            valueId: null,
            valueTitle:'',
            defaultExpandedKey:[]  
        }
    },
    watch:{
        value(val){
            this.valueId = val;
            this.initHandle();
        }
    },
    mounted() {
        this.valueId = this.value;   // 初始值
        this.initHandle();
    },
    methods: {
        // 初始化值
        initHandle(){
            if(this.valueId){
                let node = this.$refs.selectTree.getNode(this.valueId);
                if(node){
                    this.valueTitle = (node.data.labelBefore?node.data.labelBefore:'') + node.data[this.label] + (node.data.labelAfter?node.data.labelAfter:'');     // 初始化显示
                    this.$refs.selectTree.setCurrentKey(this.valueId);       // 设置默认选中
                    this.defaultExpandedKey = [this.valueId];      // 设置默认展开
                }
            } 
        },
        // 清除选中
        clearHandle(){
            this.valueTitle = ''
            this.valueId = null
            this.defaultExpandedKey = []
            this.$emit('input',null)
            this.$emit('change',null)
        },
        selectClassfy(node) {
            this.valueTitle = (node.labelBefore?node.data.labelBefore:'') + node[this.label] + (node.labelAfter?node.data.labelAfter:'');
            this.valueId = node[this.keyid]
            this.$emit('input',this.valueId)
            this.$emit('change',node)
            this.isShowSelect=false;
            this.defaultExpandedKey = []
        },
    },
}
</script>
<style lang="css" scoped>
.m-selecttree{display: inline-block;width:100%;position:relative;}  
.el-tree {
    position: absolute;
    left:0;
    top:100%;
    width:100%;
    margin-top:1px;
    overflow: auto;
    max-height: 250px;
    border: 1px solid #ddd;
    line-height: 1; 
    z-index: 204;
}

.icontip{
    position: absolute;right:10px;top:50%;transform: translateY(-50%);background:#fff;color:#C0C4CC;
}
/deep/ .el-tree-node__content{height:40px;}
</style>